<template>
	<view class="line-box" :style="[noteBoxStyle]" >
        <view class="wlkflex mb20 justify-between" v-if="item.params.more=='normal' && item.params.name">
            <view class="name">{{item.params.name}}</view>
            <view class="more col9 wlkflex" v-if="item.params.more=='normal'" @click="jump('/pages/note/list')">
                <span>查看更多</span>
                <span class="ml05">
                    <u-icon name="arrow-right" color="#999999" size="24rpx"></u-icon>
                </span>
            </view>
        </view>

        <view v-if="item.params.mode=='detail'">
            <view class="relative wlkflex justify-between bgw br04 mb20 overHidden pt20 pl20 pr20 pb20" :style="[noteStyle]" @click="jump('/pages/note/detail?id='+note.id)" v-for="(note,index) in item.data.notes" :key="index">
                <view class="detail-info wlkflex align-content-between wrap">
                    <view class="wd100">
                        <view class="info-name u-line-2 bold">{{note.name}}</view>
                        <view class="info-desc u-line-2">{{note.desc}}</view>
                    </view>
                    <view class="wd100 wlkflex col9 read-like justify-between">
                        <view v-if="item.params.read=='normal'">阅读 {{note.read}}</view>
                        <view v-if="item.params.like=='normal'" class="wlkflex">
                            <u-icon name="heart" color="#999999" size="15"></u-icon>
                            <view class="ml05">{{note.like}}</view>
                        </view>
                    </view>
                </view>
                <view class="detail-img relative">
                    <image class="wd100 hg100" lazy-load :src="note.image"  mode="aspectFill"/>
                    <view class="detail-auth bgw" v-if="item.params.auth=='normal'">
                        <span class="mr05 bz">#</span>{{note.auth}}
                    </view>
                </view>
            </view>
        </view>

        <view class="slide-flex" v-if="item.params.mode=='slide'">
            <u-scroll-list :indicator="false">
                <view class="slide-box bgw br04" :style="[noteStyle]" v-for="(note,index) in item.data.notes" :key="index" @click="jump('/pages/note/detail?id='+note.id)">
                    <view class="slide-img relative overHidden">
                        <image class="block" lazy-load :src="note.image"  mode="aspectFill"/>
                        <view class="note-auth bgw" v-if="item.params.auth=='normal'">
                            <span class="mr05 bz">#</span>{{note.auth}}
                        </view>
                    </view>
                    <view class="wd100 slide-info">
                        <view class="u-line-2 title" style="white-space: pre-wrap;height: 80rpx">{{note.name}}</view>
                        <view class="wd100 wlkflex col9 read-like mt20 justify-between" v-if="item.params.read=='normal' || item.params.like=='normal'">
                            <view v-if="item.params.read=='normal'">阅读 {{note.read}}</view>
                            <view v-if="item.params.like=='normal'" class="wlkflex">
                                <u-icon name="heart" color="#999999" size="15"></u-icon>
                                <view class="ml05">{{note.like}}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </u-scroll-list>
        </view>

        <view class="wlkflex justify-between wrap"  v-if="item.params.mode=='two' && item.params.styleMode!='waterfall'">
            <view class="wd50 two-box wlkflex mb20" v-for="(note,index) in item.data.notes" :key="index">
                <view  class="two-item bgw br04 overHidden" :style="[noteStyle]" @click="jump('/pages/note/detail?id='+note.id)">
                    <view class="two-img relative">
                        <image class="wd100 hg100 block" lazy-load :src="note.image"  mode="aspectFill"/>
                        <view class="note-auth bgw" v-if="item.params.auth=='normal'">
                            <span class="mr05 bz">#</span>{{note.auth}}
                        </view>
                    </view>
                    <view class="wd100 two-info">
                        <view class="u-line-2 title">{{note.name}}</view>
                        <view class="wd100 wlkflex col9 read-like mt20 justify-between" v-if="item.params.read=='normal' || item.params.like=='normal'">
                            <view v-if="item.params.read=='normal'">阅读 {{note.read}}</view>
                            <view v-if="item.params.like=='normal'" class="wlkflex">
                                <u-icon name="heart" color="#999999" size="15"></u-icon>
                                <view class="ml05">{{note.like}}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="waterfall" v-else-if="item.params.mode=='two' && item.params.styleMode=='waterfall'">
            <helang-waterfall-list
                    :status="waterfall.status"
                    :list="item.data.notes"
                    :reset="waterfall.reset"
                    :params="item.params"
                    type="note"
                    @click="clickFn"
                    @done="doneWaterFall"
                    ref="waterfall"
            >
            </helang-waterfall-list>
        </view>

        <view class="big-flex" v-if="item.params.mode=='big'">
            <view class="wd100 big-box wlkflex mb20" v-for="(note,index) in item.data.notes" :key="index">
                <view  class="wd100 big-item bgw br04 overHidden"  :style="[noteStyle]" @click="jump('/pages/note/detail?id='+note.id)">
                    <view class="big-img relative"  v-if="item.params.titlePosition=='inside'">
                        <image class="wd100 hg100 block" lazy-load :src="note.image"  mode="aspectFill"/>
                        <view class="wd100 inside-info">
                            <view class="wlkflex justify-between mb10" v-if="item.params.read=='normal' || item.params.like=='normal' || item.params.auth=='normal'">
                                <view class="note-inside-auth bgw" v-if="item.params.auth=='normal'">
                                    <span class="mr05 bz">#</span>{{note.auth}}
                                </view>
                                <view class="wlkflex read-like" :style="[readLikeStyle]" v-if="item.params.read=='normal' || item.params.like=='normal'">
                                    <view v-if="item.params.read=='normal'">阅读 {{note.read}}</view>
                                    <view v-if="item.params.like=='normal'" class="wlkflex">
                                        <u-icon name="heart" color="#FFFFFF" size="15"></u-icon>
                                        <view class="ml05">{{note.like}}</view>
                                    </view>
                                </view>
                            </view>

                            <view class="u-line-2 title">{{note.name}}</view>
                        </view>
                    </view>
                    <view v-else>
                        <view class="big-img relative">
                            <image class="wd100 hg100 block" lazy-load :src="note.image"  mode="aspectFill"/>
                            <view class="note-auth bgw" v-if="item.params.auth=='normal'">
                                <span class="mr05 bz">#</span>{{note.auth}}
                            </view>
                        </view>
                        <view class="wd100 big-info">
                            <view class="u-line-2 title">{{note.name}}</view>
                            <view class="wd100 wlkflex col9 read-like mt20 justify-between" v-if="item.params.read=='normal' || item.params.like=='normal'">
                                <view v-if="item.params.read=='normal'">阅读 {{note.read}}</view>
                                <view v-if="item.params.like=='normal'" class="wlkflex">
                                    <u-icon name="heart" color="#999999" size="15"></u-icon>
                                    <view class="ml05">{{note.like}}</view>
                                </view>
                            </view>
                        </view>
                    </view>

                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import { toUrl } from '@/wlkutils/tools';
    import helangWaterfallList from '../wlk-waterfall/waterfall-list';
	export default {
		name:"wlk-note",
		data() {
			return {
                // 瀑布流组件相关
                waterfall:{
                    status:"success",
                    reset:false,
                },
                noteBoxStyle:{},
                noteStyle:{},
                readLikeStyle:{}
			};
		},
        components: {
            helangWaterfallList
        },
        //属性
        props: {
            item: {
                type: Object,
                default: ()=> {
                    return []
                }
            }
        },
        created:function(e){
            this.setNoteStyle();
        },
        mounted() {
        },
        methods: {
            doneWaterFall(height){
                if(height>0){
                    this.$emit('doneWaterFall',height)
                }
            },
            clickFn(data, index, tag) {
                this.jump('/pages/note/detail?id='+data.id)
            },
            setNoteStyle(){
                this.noteBoxStyle.backgroundColor = this.item.style.bgColor;
                this.noteBoxStyle.padding = '26rpx 20rpx 0 20rpx';
                if(this.item.params.styleMode=='card'){
                    this.noteStyle.boxShadow = '0 2px 4px rgba(0,0,0,.06)';
                }
                if(this.item.params.read=='hidden' || this.item.params.like=='hidden'){
                    this.readLikeStyle.justifyContent = 'flex-end';
                }else{
                    this.readLikeStyle.justifyContent = 'space-between';
                }
            },
            jump(path){
                toUrl(path);
            }
        }
	}
</script>

<style lang="scss">
    .line-box{
        .note-auth{
            position: absolute;
            left: 20rpx;
            bottom: 20rpx;
            font-size: $font-sm;
            line-height: 36rpx;
            background-color: white;
            border-radius:2px;
            padding: 0 10rpx;
            .bz{
                color: #d40;
            }
        }
        .name{
            font-size: $font-lg;
            line-height: 44rpx;
        }
        .more{
            font-size: $font-sm;
            line-height: 44rpx;
        }
        .detail-info{
            height: 240rpx;
            width: 360rpx;
            .info-name{
                font-size: $font-lt;
            }
            .info-desc{
                font-size: $font-sm;
                color: $-color-muted;
                margin-top: 20rpx;
            }
            .read-like{
                font-size: $font-sm;
                width: 260rpx;
            }
        }
        .detail-img{
            width: 240rpx;
            height: 240rpx;
            image{
                border-radius: 2px;
            }
            .detail-auth{
                position: absolute;
                left: 10rpx;
                bottom: 10rpx;
                font-size: $font-sm;
                line-height: 36rpx;
                background-color: white;
                border-radius:2px;
                padding: 0 10rpx;
                .bz{
                    color: #d40;
                }
            }
        }
        .two-box{
            .two-item{
                width: 95%;
                overflow: hidden;
                margin: 0 auto;
                .two-img{
                    height:341rpx;
                }
                .two-info{
                    padding: 20rpx 20rpx 20rpx 20rpx;
                    pointer-events: none;
                    .title{
                        font-weight: bold;
                        font-size: $font-base;
                        height: 76rpx
                    }
                    .read-like {
                        font-size: $font-sm;
                    }
                }
            }
        }
        .big-flex{
            .big-box{
                .big-item{
                    .big-img{
                        height:283rpx;
                    }
                    .big-info{
                        padding: 20rpx 20rpx 20rpx 20rpx;
                        pointer-events: none;
                        .title{
                            font-weight: bold;
                            font-size: $font-lt;
                        }
                        .read-like {
                            font-size: $font-sm;
                        }
                    }
                    .inside-info{
                        padding: 20rpx 20rpx 20rpx 20rpx;
                        pointer-events: none;
                        position: absolute;
                        bottom: 0;
                        background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.5));
                        color: #FFFFFF;
                        .title{
                            font-weight: bold;
                            font-size: $font-lt;
                        }
                        .read-like {
                            font-size: $font-sm;
                            width: 35%;
                        }
                    }
                    .note-inside-auth{
                        font-size: $font-sm;
                        line-height: 18px;
                        background-color: white;
                        border-radius:2px;
                        padding: 0 5px;
                        color: $-color-normal;
                        .bz{
                            color: #d40;
                        }
                    }
                }
            }
        }
        .slide-flex{
            .slide-box{
                margin-right: 20rpx;
                width: 290rpx;
                .slide-img{
                    width: 290rpx;
                    height: 290rpx;
                    border-radius: 4px 4px 0 0;
                    image{
                        height: 100%;
                        width: 100%;
                    }
                }
                .slide-info{
                    padding: 20rpx 20rpx 20rpx 20rpx;
                    pointer-events: none;
                    .title{
                        font-weight: bold;
                        font-size: $font-lt;
                    }
                    .read-like {
                        font-size: $font-sm;
                    }
                }
            }
        }
    }
</style>